<%--
  Created by IntelliJ IDEA.
  User: lirance
  Date: 16/3/17
  Time: 下午1:16
  To change this template use File | Settings | File Templates.
  显示用户以及服务列表
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <%-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"/>--%>
    <title>Web服务聚类</title>

    <link href="css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/>
    <link href="./css/bootstrap.css" rel="stylesheet"/>
    <link href="./css/amber-style.css" rel="stylesheet"/>
    <style type="text/css"></style>
    <%--<script src="./js/echarts-all.js"></script>
    <script src="./js/echarts.js"></script>--%>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/amber-script.js"></script>
    <script src="./js/amber-chart.js"></script>

    <script src='js/jquery.js'></script>

    <script src="js/index.js"></script>
    <script src="./js/jquery-2.2.3.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="./css/bootstrap-theme.css">
</head>
<body>
<header>
    <div class="container">
        <p class="header-con-p">基于协同过滤的服务推荐系统</p>
    </div>
</header>
<div class="content">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="col-md-12">
                <div class="row-fluid">
                    <div class="col-md-3">
                        <div class="panel-group" id="accordion-821083" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingOne">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-289331" aria-expanded="true"
                                           aria-controls="collapseOne">
                                            Qos数据信息管理
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-289331" class="panel-collapse collapse " role="tabpanel"
                                     aria-labelledby="headingOne">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                用户信息管理
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                web服务信息
                                            </a>

                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316497" data-toggle="tab" style="color:black">
                                                用户-web服务调用信息
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingTwo">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691493" aria-expanded="true"
                                           aria-controls="collapseTwo">
                                            Web服务聚类
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691493" class="panel-collapse collapse in" role="tabpanel"
                                     aria-labelledby="headingTwo">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                Web服务层次聚类
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                聚类结果分析（散点图）
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316497" data-toggle="tab" style="color:black">
                                                聚类结果分析（表格）
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingThree">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691494" aria-expanded="true"
                                           aria-controls="collapseThree">
                                            Qos预测
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691494" class="panel-collapse collapse " role="tabpanel"
                                     aria-labelledby="headingThree">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                用户相似度分析与Qos预测
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingFour">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691495" aria-expanded="true"
                                           aria-controls="collapseFour">
                                            预测结果评估
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691495" class="panel-collapse collapse " role="tabpanel"
                                     aria-labelledby="headingFour">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                λ与预测结果的关系
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                top-K与预测结果的关系
                                            </a>

                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316497" data-toggle="tab" style="color:black">
                                                聚类数目与预测结果的关系
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316498" data-toggle="tab" style="color:black">
                                                数据多少与预测结果的关系
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <script type="text/javascript">
                                $(function () {
                                    $('#accordion-element-289331').on('show.bs.collapse', function () {
                                        window.location.href = 'getListsAction';
                                    })
                                    $('#accordion-element-691493').on('show.bs.collapse', function () {
                                        window.location.href = 'getClustersAction';
                                    })
                                    $('#accordion-element-691494').on('show.bs.collapse', function () {
                                        window.location.href = 'qosAction.action';
                                    })
                                    $('#accordion-element-691495').on('show.bs.collapse', function () {
                                        window.location.href = 'result.jsp';
                                    })
                                });
                            </script>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="tabbable" id="tabs-191694">
                            <ul class="nav nav-tabs">
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="panel-425252">
                                    <div class="row-fluid">
                                        <div class="col-md-12" style="overflow:scroll; height:600px; width:800px">
                                            <table class="table table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th>
                                                        cluster
                                                    </th>
                                                    <th>
                                                        WebService
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <%
                                                    int id = 0;
                                                    String kinds = null;
                                                %>
                                                <s:iterator var="dp" value="dataPoints">
                                                    <%
                                                        id++;
                                                        if (id % 5 == 0) kinds = "info";
                                                        else if (id % 5 == 1) kinds = "danger";
                                                        else if (id % 5 == 2) kinds = "warning";
                                                        else if (id % 5 == 3) kinds = "success";
                                                        else if (id % 5 == 4) kinds = "";
                                                    %>
                                                    <tr class="<%=kinds%>">
                                                        <td>
                                                            <span>${dp.dataPointName}</span>
                                                        </td>
                                                            <%----%>
                                                        <td>
                                                            <span>${dp.dimensioin[0]}</span>&nbsp;&nbsp;

                                                        </td>
                                                    </tr>
                                                </s:iterator>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="panel-316496">
                                    <div class="row-fluid">
                                        <div class="col-md-12">
                                            <div class="col-md-12" style="overflow:scroll; height:600px; width:800px">
                                                <div id="main" style="width: 800px;height:600px;"></div>
                                                <script type="text/javascript">
                                                    var myChart = echarts.init(document.getElementById('main'));
                                                    /*  var data1 = '161.2';
                                                     var data2 = '178';
                                                     var data3 = '88.4';
                                                     var data4 = '161.2 ,88.4';
                                                     var data = [];
                                                     data.push('[161.2,178],[88.4,66]');*/


                                                    var option = {
                                                        animation: false,
                                                        title: {
                                                            text: '服务聚类分布',
                                                        },
                                                        /*grid: {
                                                         left: '3%',
                                                         right: '4%',
                                                         bottom: '3%',
                                                         containLabel: true
                                                         },*/
                                                        tooltip: {
                                                            trigger: 'axis',
                                                            showDelay: 0,
                                                            formatter: function (params) {
                                                                if (params.value.length > 1) {
                                                                    return '服务' + params.value[2] + ' :<br/>'
                                                                            + 'cluster' + params.value[0] + '; 平均RTT : '
                                                                            + params.value[1] + 's';
                                                                }
                                                                else {
                                                                    return 服务响应时间 + ' :<br/>'
                                                                            + params.name + ' : '
                                                                            + params.value;
                                                                }
                                                            },
                                                            axisPointer: {
                                                                show: true,
                                                                type: 'cross',
                                                                lineStyle: {
                                                                    type: 'dashed',
                                                                    width: 1
                                                                }
                                                            }
                                                        },
                                                        /*legend: {
                                                         data: ['clusters'],
                                                         left: 'right'
                                                         },*/
                                                        xAxis: [
                                                            {
                                                                type: 'value',
                                                                scale: true,
                                                                axisLabel: {
                                                                    formatter: ': {value}'
                                                                },
                                                                splitLine: {
                                                                    lineStyle: {
                                                                        type: 'dashed'
                                                                    }
                                                                }
                                                            }
                                                        ],
                                                        yAxis: {
                                                            type: 'value',
                                                            min: 'dataMin',
                                                            max: 'dataMax',
                                                            splitLine: {
                                                                show: true
                                                            }
                                                        },
                                                        dataZoom: [
                                                            {
                                                                type: 'slider',
                                                                show: true,
                                                                xAxisIndex: [0],
                                                                start: 0,
                                                                end: 100
                                                            },
                                                            {
                                                                type: 'slider',
                                                                show: true,
                                                                yAxisIndex: [0],
                                                                left: '93%',
                                                                start: 0,
                                                                end: 100
                                                            },
                                                            {
                                                                type: 'inside',
                                                                xAxisIndex: [0],
                                                                start: 0,
                                                                end: 100
                                                            },
                                                            {
                                                                type: 'inside',
                                                                yAxisIndex: [0],
                                                                start: 0,
                                                                end: 100
                                                            }
                                                        ],
                                                        series: [
                                                            {
                                                                name: 'clusters',
                                                                type: 'scatter',
                                                                data: [],
                                                                markPoint: {
                                                                    data: [
                                                                        /*{type: 'max', name: '最大值'},
                                                                         {type: 'min', name: '最小值'}*/
                                                                    ]
                                                                },
                                                                markLine: {
                                                                    data: [
                                                                        {type: 'average', name: '平均值'}
                                                                    ]
                                                                }
                                                            }
                                                        ]
                                                    };
                                                    myChart.setOption(option);

                                                    $.getJSON("getAllclustersAction", function (data) {

                                                        var d = [];
                                                        var len = data.serviceclusteName.length;
                                                        while (len--) {
                                                            d.push([data.serviceclusteName[len], data.serviceRtt[len], data.serviceId[len]
                                                            ]);
                                                        }
                                                        myChart.setOption({
                                                            series: [{
                                                                name: 'clusters',
                                                                data: d
                                                            }]
                                                        });
                                                    });
                                                </script>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="tab-pane" id="panel-316497">
                                    <div class="row-fluid">
                                        <div class="col-md-12" style="overflow:scroll; height:600px; width:800px">
                                            <table class="table table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th>
                                                        cluster
                                                    </th>
                                                    <th>
                                                        WebServiceId
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <%
                                                    id = 0;
                                                    kinds = null;
                                                %>
                                                <s:iterator var="cl" value="clustlist">
                                                    <%
                                                        id++;
                                                        if (id % 5 == 0) kinds = "info";
                                                        else if (id % 5 == 1) kinds = "danger";
                                                        else if (id % 5 == 2) kinds = "warning";
                                                        else if (id % 5 == 3) kinds = "success";
                                                        else if (id % 5 == 4) kinds = "";
                                                    %>
                                                    <tr class="<%=kinds%>">
                                                        <td>
                                                            <span>${cl.clusterName}</span>
                                                        </td>
                                                            <%----%>
                                                        <td>
                                                            <span>${cl.dataPoints[0].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[1].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[2].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[3].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[4].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[5].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[6].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[7].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[8].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[9].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[10].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[11].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[12].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[13].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[14].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[15].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[16].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[17].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[18].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[19].dataPointName}</span>&nbsp;&nbsp;
                                                            <span>${cl.dataPoints[20].dataPointName}</span>&nbsp;&nbsp;

                                                        </td>
                                                    </tr>
                                                </s:iterator>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>